<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <title>{$share_info.title}</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/css/common.css" type="text/css"/>
</head>
<style type="text/css">
    .banner{
        width: 100vw;
        height: auto;
        padding-top: 30px;
        position: relative;
    }
    .banner>img{
        width: 100vw;
        height: auto;
    }
    .banner>div{
        width: 100vw;
        height: auto;
        position: absolute;
        text-align: center;
        bottom: 0px;
        height: 26%;
    }
    .button-tool{
        width: 100vw;
        display: flex;
        justify-content: center;
    }
    .draw{
        background-image: url("/static/images/button1.png");
        background-position: top center;
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 45vw;
        height: 12vw;
    }
    .exchange{
        background-image: url("/static/images/button2.png");
        background-position: top center;
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 30vw;
        height: 12vw;
    }
    .tool {
        width: 100vw;
        height: 20vw;
        display: flex;
        justify-content: center;
    }
     #record{
        background-image: url("/static/images/record.png");
        background-position: top center;
         background-size: 100% auto;
         background-repeat: no-repeat;
         width: 40vw;
         height: auto;
    }
     #gift{
        background-image: url("/static/images/gift.png");
        background-position: top center;
         background-size: 100% auto;
         background-repeat: no-repeat;
         width: 40vw;
         height: auto;
    }
    .piece {
        margin: auto;
        margin-top: 1.8em;
        width: 206px;
        height: 206px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0.1em;
    }

    .piece-item {
        position: relative;
    }

    .piece-item .number {
        border: 1px solid white;
        border-radius: 12px;
        height: 20px;
        width: 20px;
        background-color: red;
        color: white;
        font-size: 14px;
        position: absolute;
        text-align: center;
        line-height: 20px;
        right: -10px;
        top: -10px;
        z-index: 99;
    }

    .img-box {
        width: 100px;
        height: 100px;
        position: relative;
    }

    .piece-img {
        background-color: red;
        width: inherit;
        height: inherit;
        border-radius: 0.3em;
        border: dashed 1px white;
    }

    .dark-mask {
        height: inherit;
        width: inherit;
        background-color: #000;
        opacity: 0.6;
        position: absolute;
        border-radius: 0.3em;
    }

    .received-img {
        margin: auto;
        width: 200px;
        height: 200px;
        border-radius: 10px;
    }
    .product-title{
        font-size: 1.3em;
        color: white;
    }
    .rule{
        color: #000000;
        font-size: 0.6em;
        text-align: center;
    }
    .rule .title{
        font-size: 1.5em;
    }
    .rule .text-area{
        font-size:1.2em;
        margin: auto;
        width: 80vw;
        text-align: left;
    }
    .footer{
        width: 100vw;
        height: auto;
        position: absolute;
        buttom:0px;
    }
    .footer>img{
        width: 100vw;
        height: auto;
    }
</style>
<body>
<div class="container">
    <div class="banner">
        <img src="/static/images/banner.png"/>
        <div>
            <p>{$product.start_time} - {$product.end_time}</p>
        </div>
    </div>
    <div class="button-tool">
        <div class="draw">
            <span id="remain-times">{$remain_times}</span>
        </div>
        <div class="exchange"></div>
    </div>
    <div>
        <div class="piece">
            {volist name="$product.piece" id="piece"}
            <div class="piece-item" data-piece-id="{$piece.id}">
                <span class="number piece-id-{$piece.id}" data-piece-id="{$piece.id}">{$piece.number}</span>
                <a class="img-box">
                    <div class="dark-mask" style="visibility: {$piece['number']?'hidden':'visible'}"></div>
                    <img class="piece-img" src="{$piece.img_url}"/>
                </a>
            </div>
            {/volist}
        </div>
    </div>
    <div class="tool">
        <div class="gift" id='gift'></div>
        <div class="record" id='record'></div>
    </div>
    <div class="rule">
        <p class="title">活动详情：</p>
        <div class="text-area">
            <p>1.活动开始时间：2018-8-12</p>
            <p>2.活动结束时间：2018-12-20</p>
            <p>3.活动说明</p>
            <p>4.xxx拥有最终解释权</p>
            <p>5.门店地址 ：海南省海口市秀英区秀华路xxx号</p>
            <p>6.</p>
            <p>1.活动开始时间：2018-8-12</p>
            <p>2.活动结束时间：2018-12-20</p>
            <p>3.活动说明</p>
            <p>4.xxx拥有最终解释权</p>
            <p>5.门店地址 ：海南省海口市秀英区秀华路xxx号</p>
            <p>6.</p>
        </div>
    </div>
    <div class="notice">
        <p>右上角分享给好友</p>
    </div>
    <div class="msg">
        <div class="msg-box">
            <span class="msg-close">×</span>
            <p id="msg-text"></p>
            <div class="msg-content">
            </div>
        </div>
    </div>
    <div class="footer">
        <img src="/static/images/footer.png"/>
    </div>
</div>
</body>
</html>
<script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
<script>
    var exchanging = false;
    var drawing = false;
    $(document).ready(function () {
        wx.config({$wx_config});
        var product_id = "{$product['id']}";
        //微信分享活动页面
        var img = '{$share_info.img_url}';
        shareProductToFriend('{$share_info.title}','{$share_info.desc}',img,product_id,'{$share_info.name}', function (data) {
            //后期可以考虑分享一次增加一次抽奖机会（微信改版后无法得知用户是否分享成功，所以不能采用这种方式了）
        })
        shareProductToTimeLine('{$share_info.title}','{$share_info.desc}',img,product_id,'{$share_info.name}', function (data) {
            //后期可以考虑分享一次增加一次抽奖机会（微信改版后无法得知用户是否分享成功，所以不能采用这种方式了）
        })
        var is_share = parseInt("{$is_share}");
        if (is_share) {
            var share_id = "{$share_id}";
            //如果有分享，执行自动领取碎片操作
            $.post('/product_piece/receive',
                {
                    'share_id': share_id,
                }
                , function (data) {
                    if (data.error_code == 0) {
                        var str = '';
                        str += '<img class="received-img" src="' + data.data.img_url + '">';
                        //获得碎片
                        changeNumber(data.data.id, 1);
                    }
                    showDialog(msg,str);
                })
        }
        $('.draw').click(function () {
            if (drawing) {
                return false;
            }
            drawing = true;
            $.ajax({
                url: "{:url('index/product/draw',['product_id'=>$product.id])}",
                type: 'get',
                success: function (data) {
                    str = '';
                    if (data.error_code == 0) {
                        drawing == false;
                        str += '<img class="received-img" src="' + data.data.img_url + '">';
                        //获得碎片
                        changeNumber(data.data.id, 1);
                        $('#remain-times').html(parseInt($('#remain-times').html())-1);
                    }
                    showDialog(data.msg,str);
                },
                complete: function () {
                    drawing = false;
                }
            })
        })
        $('.exchange').click(function () {
            if (exchanging) {
                return false;
            }
            exchanging = true;
            $.ajax({
                url: "{:url('index/product/exchange',['product_id'=>$product.id])}",
                type: 'get',
                success: function (data) {
                    var str = '';
                    if (data.error_code == 0) {
                        str += '<img class="received-img" src="' + data.data.img_url + '">';
                        $('.number').each(function () {
                            let piece_id = $(this).data('piece-id');
                            changeNumber(piece_id,-1);
                        })
                    }
                    showDialog(data.msg,str);
                },
                complete: function () {
                    exchanging = false;
                }
            })
        })

        //跳转兑换页
        $("#gift").click(function () {
            window.location.href = "/user/getExchanges";
        })

        //记录
        $("#record").click(function () {
            $.ajax({
                url: "/user/record",
                type: 'get',
                success: function (data) {
//                    if (data.error_code == 0) {
//                        $('.msg-content').html(data.data);
//                    }
                    showDialog('领取记录',data.data);
                }
            })
        })

        //点击碎片
        $('.piece-item').click(function () {
            var piece_id = $(this).data('piece-id');
            $.ajax({
                url: '/product_piece/index/piece_id/'+piece_id,
                type: 'get',
                success: function (data) {
//                    if (data.error_code == 0) {
//                        $('.msg-content').html(data.data);
//                    }
                    showDialog('',data.data);
                }
            })
        })
    })
</script>
